import React, { FC, useEffect } from 'react';
import * as echarts from 'echarts';

const Echarts: FC = () => {
  useEffect(() => {
    const chartDom: any = document.getElementById('main-echart');

    if (chartDom) {
      const myChart = echarts.init(chartDom);
      const option: any = {
        title: {
          text: 'Referer of a Website',
          subtext: 'Fake Data',
          left: 'center',
        },
        tooltip: {
          trigger: 'item',
        },
        legend: {
          orient: 'vertical',
          left: 'left',
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: [
              { value: 1048, name: 'Search Engine' },
              { value: 735, name: 'Direct' },
              { value: 580, name: 'Email' },
              { value: 484, name: 'Union Ads' },
              { value: 300, name: 'Video Ads' },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
            label: {
              show: true,
              width: 50,
              overflow: 'break',
            },
          },
        ],
      };
      option && myChart.setOption(option);
    }
  }, []);
  return <div id="main-echart" style={{ width: 500, height: 500 }}></div>;
};

export default Echarts;
